<template>
	<div>
		<div class="my-detail">
			<van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
				<van-swipe-item v-for="(item,i) in product.picList" :key="i">
					<van-image :src="APIDomainName + item.md" /></van-swipe-item>
			</van-swipe>
			<van-cell title="商品编号" :value="product.id" />
			<van-cell title="商品名称" :value="product.name" />
			<van-cell title="商品标题" :value="product.title" />
			<van-cell title="商品规格" :value="product.spec" />
			<van-cell title="硬盘" :value="product.disk" />
			<van-cell title="CPU" :value="product.cpu" />
			<van-cell title="内存" :value="product.memory" />
			<van-cell title="显卡" :value="product.video_card" />
			<van-cell title="分辨率" :value="product.resolution" />
			<van-cell title="上架时间" :value="product.shelf_time" />
			<van-cell title="单价" :value="product.price" />

			<!-- 商品购买区域 -->
			<van-cell>
				<template #default>
					<div class="count-buy">
						<div>购买数量</div>
						<van-stepper v-model="count" integer />
						<van-button type="primary" size="small" @click="onClickAddShopcart">加入购物车
						</van-button>
					</div>
				</template>
			</van-cell>

			<van-button type="primary" size="large" @click="$router.back()">返回</van-button>
		</div>
	</div>
</template>

<script>
	import { getProductDetailByIdAPI } from "@/api/product.js";
	import dayjs from 'dayjs' // 日期处理模块
	import { addCartAPI } from "@/api/cart.js";
	import { showToast } from 'vant'
	export default {
		data() {
			return {
				product: {},
			}
		},
		//DOM加载后获取后端数据
		mounted() {
			this.loadData();
		},
		methods: {
			loadData() {
				const id = this.$route.query.id // 注意路由传参的方式
				// 调用接口
				getProductDetailByIdAPI(id).then(result => {
					this.product = result.data;
					// 日期格式转换
					this.product.shelf_time = dayjs(this.product.shelf_time).format('YYYY-MM-DD HH:mm:ss');
				})
			},
			//处理添加购物车
			onClickAddShopcart() {
				// 接口参数，参见接口文档
				let params = {
					product_id: this.product.id,
					count: this.count,
				};
				//2.使用封装后的接口,注意：接口有参数
				addCartAPI(params).then(result => {
					showToast(result.msg);
				}).catch(() => {});
			},
		}
	}
</script>

<style lang="less" scoped>
.my-detail {
  background: #f8f9fa;
  min-height: 100vh;
  padding: 16px;

  .my-swipe {
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    
    .van-swipe-item {
      height: 300px;
      
      .van-image {
        height: 100%;
      }
    }
  }

  .van-cell {
    margin: 8px 0;
    border-radius: 8px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.05);
    
    &::after {
      border: none;
    }

    &__title {
      font-weight: bold;
      color: #2c3e50;
    }

    &__value {
      color: #666;
      
      span {
        color: #e74c3c;
        font-weight: bold;
        font-size: 18px;
      }
    }
  }

  .count-buy {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 12px 0;

    > div:first-child {
      font-weight: bold;
    }

    .van-button {
      flex-shrink: 0;
      padding: 0 24px;
      border-radius: 20px;
      transition: all 0.3s;
      
      &:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 8px rgba(231, 76, 60, 0.3);
      }
    }
  }

  .van-button--large {
    margin-top: 24px;
    background: linear-gradient(45deg, #3498db, #2980b9);
    border: none;
    border-radius: 30px;
  }
}
</style>